<script setup lang="tsx">
import { computed, onMounted, ref, watch } from 'vue';
import type { Crontab } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'CrontabMonth'
});

interface Props {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  check: Function;
  cron: Crontab;
}
const props = defineProps<Props>();

interface Emits {
  (e: 'update'): void;
}
const emit = defineEmits<Emits>();

const monthRadioValue = ref('1');
const monthCycle01 = ref(1);
const monthCycle02 = ref(2);
const monthAverage01 = ref(1);
const monthAverage02 = ref(1);
const monthCheckboxList = ref<string[]>([]);

const monthOptions: any = [];
function initMonthOptions() {
  for (let i = 1; i < 12; i += 1) {
    monthOptions.push({
      label: i,
      value: i
    });
  }
}
initMonthOptions();

function retsetParam() {
  monthCycle01.value = 1;
  monthCycle02.value = 2;
  monthAverage01.value = 1;
  monthAverage02.value = 1;
  monthCheckboxList.value = [];
}

// 计算两个周期值
const monthCycleTotal = computed(() => {
  const c01 = props.check(monthCycle01.value, 1, 11);
  const c02 = props.check(monthCycle02.value, c01 ? c01 + 1 : 2, 12);
  return `${c01}-${c02}`;
});
// 计算平均用到的值
const monthAverageTotal = computed(() => {
  const a01 = props.check(monthAverage01.value, 1, 11);
  const a02 = props.check(monthAverage02.value, 1, 12 - a01 || 0);
  return `${a01}/${a02}`;
});
// 计算勾选的checkbox值合集
const monthCheckboxString = computed(() => {
  const str = monthCheckboxList.value.join();
  return str === '' ? '*' : str;
});

watch(
  () => props.cron,
  () => {
    monthValueChange(props.cron);
  }
);
watch(
  () => monthRadioValue.value,
  () => {
    radioChange();
  }
);
watch(
  () => monthCycleTotal.value,
  () => {
    monthCycleChange();
  }
);
watch(
  () => monthAverageTotal.value,
  () => {
    monthAverageChange();
  }
);
watch(
  () => monthCheckboxString.value,
  () => {
    monthCheckboxChange();
  }
);

// 单选按钮值变化时
function radioChange() {
  switch (monthRadioValue.value.toString()) {
    case '1':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'month', '*');
      break;
    case '2':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'month', monthCycleTotal.value);
      break;
    case '3':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'month', monthAverageTotal.value);
      break;
    case '4':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'month', monthCheckboxString.value);
      break;
    default:
      break;
  }
}
// 周期两个值变化时
function monthCycleChange() {
  monthRadioValue.value = '2';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'month', monthCycleTotal.value);
}
// 平均两个值变化时
function monthAverageChange() {
  monthRadioValue.value = '3';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'month', monthAverageTotal.value);
}
// checkbox值变化时
function monthCheckboxChange() {
  monthRadioValue.value = '4';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'month', monthCheckboxString.value);
}

function monthValueChange(cronVal: Crontab) {
  monthRadioValue.value = '';
  retsetParam();
  const val = cronVal.month;
  if (val === '*') {
    monthRadioValue.value = '1';
  } else if (val.includes('-')) {
    monthRadioValue.value = '2';
    const v = val.split('-');
    monthCycle01.value = Number.parseInt(v[0], 10);
    monthCycle02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('/')) {
    monthRadioValue.value = '3';
    const v = val.split('/');
    monthAverage01.value = Number.parseInt(v[0], 10);
    monthAverage02.value = Number.parseInt(v[1], 10);
  } else {
    monthRadioValue.value = '4';
    monthCheckboxList.value = val.split(',');
  }
}

onMounted(() => {
  const cronVal = props.cron;
  monthValueChange(cronVal);
});
</script>

<template>
  <div>
    <NForm>
      <NRadioGroup v-model:value="monthRadioValue">
        <NFormItem class="form-item-height">
          <NRadio value="1">{{ $t('common.job.monthOne') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="2" />
          &nbsp;{{ $t('common.job.monthTwoPre') }}&nbsp;
          <NInputNumber v-model:value="monthCycle01" :min="1" :max="11" button-placement="both"></NInputNumber>
          &nbsp;-&nbsp;
          <NInputNumber
            v-model:value="monthCycle02"
            :min="monthCycle01 ? monthCycle01 + 1 : 2"
            :max="12"
            button-placement="both"
          />
          &nbsp;{{ $t('common.job.monthTwoSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="3" />
          &nbsp;{{ $t('common.job.monthThreePre') }}&nbsp;
          <NInputNumber v-model:value="monthAverage01" :min="1" :max="1" button-placement="both" />
          &nbsp;{{ $t('common.job.monthThreeMid') }}&nbsp;
          <NInputNumber
            v-model:value="monthAverage02"
            :min="1"
            :max="12 - monthAverage01 || 0"
            button-placement="both"
          />
          &nbsp;{{ $t('common.job.monthThreeSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="4" />
          &nbsp;{{ $t('common.job.specify') }}&nbsp;
          <NSelect
            v-model:value="monthCheckboxList"
            :options="monthOptions"
            multiple
            class="w-50%"
            :placeholder="$t('common.job.multipleChoices')"
          />
        </NFormItem>
      </NRadioGroup>
    </NForm>
  </div>
</template>

<style scoped>
.form-item-height {
  --n-blank-height: 0px !important;
  --n-feedback-height: 0px !important;
}
</style>
